import logo from './logo.svg';
import './App.css';
import { Tag } from 'antd';
import { AppstoreOutlined, MenuOutlined } from '@ant-design/icons';
import React, { useEffect, useState } from 'react';
import { getCx, getType, getCar } from './request/api';

export default function App() {
    const [cx, setCx] = useState("")
    const [cxList, setCxList] = useState([])
    const [chexi, setChexi] = useState({})
    const [type, setType] = useState([])
    const [nowType, setNowType] = useState(localStorage.getItem("nowtype") ? JSON.parse(localStorage.getItem("nowtype")) : {})
    const [carList, setCarList] = useState([])
    const [price, setPrice] = useState(localStorage.getItem("price") ? localStorage.getItem("price") : "")
    const [money, setMoney] = useState([])
    const [show, setShow] = useState(false)
    useEffect(() => {
        getCx().then((data) => {
            setCxList(data.data.list)
        })
        getType().then((data) => {
            setType(data.data.list)
        })

        getCar().then((data) => {
            setCarList(data.data.list)
            console.log(data.data.list);
        })
        setMoney(price.split("-"))

    }, [price])
    return <>
        <p>品牌:<span onMouseEnter={() => { setCx("A") }} style={{ width: "15px", display: "inline-block", backgroundColor: cx == "A" ? "red" : "", textAlign: "center", margin: "10px" }}>A</span><span onMouseEnter={() => { setCx("B") }} style={{ width: "15px", display: "inline-block", backgroundColor: cx == "B" ? "red" : "", textAlign: "center", margin: "10px" }}>B</span><span onMouseEnter={() => { setCx("D") }} style={{ width: "15px", display: "inline-block", backgroundColor: cx == "D" ? "red" : "", textAlign: "center", margin: "10px" }}>D</span></p>
        <p>{cxList.filter(k => k.from == cx).map(t => <span onClick={() => { setChexi(t) }} style={{ width: "45px", display: "inline-block", backgroundColor: chexi.name == t.name ? "red" : "", textAlign: "center", margin: "10px" }}>{t.name}</span>)}</p>
        <p>车系：{type.filter(k => k.cid == chexi._id).map(t => <span onClick={() => { setNowType(t); localStorage.setItem("nowtype", JSON.stringify(t)) }} style={{ width: "80px", display: "inline - block", backgroundColor: nowType.name == t.name ? "red" : "", textAlign: "center", margin: "10px" }}>{t.name}</span>)}</p>
        <p>价格：<span onClick={() => { setPrice("0-4"); localStorage.setItem("price", "0-4") }} style={{ width: "80px", display: "inline - block", backgroundColor: price == "0-4" ? "red" : "", textAlign: "center", margin: "10px" }}>0-4万</span><span onClick={() => { setPrice("5-8"); localStorage.setItem("price", "5-8") }} style={{ width: "80px", display: "inline - block", backgroundColor: price == "5-8" ? "red" : "", textAlign: "center", margin: "10px" }}>5-8万</span><span onClick={() => { setPrice("9-10"); localStorage.setItem("price", "9-10") }} style={{ width: "80px", display: "inline - block", backgroundColor: price == "9-10" ? "red" : "", textAlign: "center", margin: "10px" }}>9-10万</span></p>
        {Object.keys(nowType).length > 0 ? <Tag closeIcon color="red" onClose={() => { setNowType({}); localStorage.setItem("nowtype", "") }}>
            {nowType.name}
        </Tag> : ""}
        {price ? <Tag closeIcon color="red" onClose={() => { setPrice(""); localStorage.setItem("price", "") }}>
            {price}万
        </Tag> : ""}
        {Object.keys(nowType).length > 0 || price ? <span onClick={() => { setPrice(""); setNowType({}) }}>重新选择</span> : ""}
        <p style={{ textAlign: "right" }}><span onClick={() => { setShow(false) }}><AppstoreOutlined style={{ color: show ? "" : "orange" }} /></span><span onClick={() => { setShow(true) }}><MenuOutlined style={{ color: show ? "orange" : "" }} /></span></p>
        {show ? carList.filter(k => k.tid == nowType._id && k.price >= Number(money[0]) && k.price < Number(money[1])).map(t => <div style={{ display: "flex", justifyContent: "space-between", margin: "10px" }}>
            <img src={t.img} style={{ width: "150px" }} />
            <div>{t.name}</div>
            <div>{t.price}</div>
        </div>) : ""
        }
        <div style={{ display: "flex", flexFlow: "wrap" }}>
            {!show ? carList.filter(k => k.tid == nowType._id && k.price >= Number(money[0]) && k.price < Number(money[1])).map(t => <div style={{ display: "flex", justifyContent: "space-between", margin: "10px",width:"30vw" }}>
                <img src={t.img} style={{ width: "150px" }} />
                <div style={{ marginLeft: "10px" }}>{t.name}</div>
                <div style={{ marginLeft: "10px" }}>{t.price}</div>
            </div>) : ""
            }
        </div>

    </>
}